<template>
  <el-container class="home-containe">
    <!--头部区域-->
    <el-header>
      <div class="header_left">
        <img src="../assets/timg.png"
             alt="">
        <span>学生宿舍管理</span>
      </div>
      <div class="header_center">
        <el-popover placement="top-start"
                    width="400"
                    trigger="hover"
                    :content="inform">
          <div class="scroll_container"
               @click="drawer = true"
               slot="reference">
            <p class="scroll_text"
               :style="{'animation-duration': getTextLen + 's'}">{{inform}}</p>
          </div>
        </el-popover>
      </div>
      <div class="header_right">
        <span class="curTime"> 当前时间：{{curtime}}</span>
        <el-button type="info"
                   plain
                   @click="loginOut">退出</el-button>
      </div>
    </el-header>
    <!--主体区域-->
    <el-container>
      <!--侧边栏区域-->
      <!--通过isCollapse判断菜单容器宽度变化，如果是true，则变成64px,否则200px-->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button"
             @click="toggleBtnClick">|||</div>
        <el-menu background-color="#333744"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                 :collapse="isCollapse"
                 :collapse-transition="false"
                 :router="true"
                 unique-opened
                 :default-active="activePath">
          <!--一级菜单
          注意：index需要接收的是字符串，如果id是数值就需要转换，
          通常数字+字符结果为字符串，所以id为数值的时候可以写成:index="item.id + ''"-->
          <el-submenu :index="item.meta.id"
                      v-for="item in data"
                      :key="item.meta.id">
            <!--一级菜单模板-->
            <template slot="title">
              <i :class="item.meta.icon"></i>
              <span>{{item.meta.name}}</span>
            </template>

            <!--二级菜单-->
            <el-menu-item :index="'/'+val.meta.path"
                          v-for="val in item.children"
                          :key="val.meta.id"
                          @click="saveNavStatus('/'+val.meta.path)">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{val.meta.name}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!--内容区域-->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
    <el-drawer :visible.sync="drawer"
               direction="rtl"
               :with-header="false"
               size="50%">
      <el-collapse v-model="activeNames"
                   accordion>
        <el-collapse-item :title="item.time"
                          v-for="(item,index) in informs"
                          :key="index"
                          :name="index">
          <p>{{item.inform}}</p>
        </el-collapse-item>
      </el-collapse>
    </el-drawer>
  </el-container>
</template>

<script>
import { formatDate, formDate } from 'commonjs/formatDate.js'
export default {
  name: 'Home',
  props: [''],
  created () {
    this.getRouter()
    // 在页面创建之前将点击的path从localStorage拿出来保存到activePath
    this.activePath = window.localStorage.getItem('activePath')
    // 创建定时器，用来显示当前时间
    this.timer = setInterval(() => {
      this.curtime = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
    }, 1000)
    setTimeout(() => {
      this.getInform()
    }, 1000)
  },
  mounted () {
  },
  beforeDestroy () {
    // 页面销毁时删除定时器
    clearInterval(this.timer)
  },
  data () {
    return {
      // 菜单是否折叠
      isCollapse: false,
      // 将保存在localStorage的地址保存到activePath中
      activePath: null,
      data: [],
      curtime: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
      inform: '',
      activeNames: [0],
      informs: [],
      drawer: false
    }
  },
  computed: {
    getTextLen () {
      return this.inform.length * 0.133
    }
  },
  methods: {
    // 获取路由信息
    getRouter () {
      // const routers = this.$router.options.routes[3].children.slice(1)
      const routers = JSON.parse(window.localStorage.getItem('router'))[3].children.slice(1)
      // console.log(11111, this.$router.options.routes[3].children.slice(1))
      // console.log(22222, routers)
      this.data = routers
    },
    async loginOut () {
      const { data: res } = await this.$axios.get('users/exit')
      // console.log(res)
      if (res.code === 0) {
        this.$message.success('退出成功')
      }
      setTimeout(() => {
        // 清除会话期的token
        window.localStorage.clear()
        // 清除vuex中的token
        this.$store.commit('login/loginOut', null)
        // token不存在就跳转回login界面
        this.$router.push('/login')
        // 刷新一次页面，将vuex中的缓存清空
        window.location.reload()
      }, 200)
    },
    // 点击菜单折叠展开
    toggleBtnClick () {
      this.isCollapse = !this.isCollapse
    },
    // 保存链接的激活状态,通过window.sessionStorage.setItem()方法将点击的path保存到sessionStorage中
    saveNavStatus (activePath) {
      window.localStorage.setItem('activePath', activePath)
      // 当点击另外一个path时重新给activePath赋值
      this.activePath = activePath
    },
    // 获取发布最新通知
    async getInform () {
      const { data: res } = await this.$axios.get('/tower/findInform', {
        params: {
          tower: window.localStorage.getItem('tower')
        }
      })
      // console.log(res)
      if (res.meta.code === 200) {
        res.result.map(valid => {
          valid.time = formDate(valid.time)
        })
        this.inform = res.result[0].inform
        this.informs = res.result
      }
    }
  }
}

</script>
<style lang='less' scoped>
.home-containe {
  height: 100%;

  .el-header {
    background-color: #373d41;
    display: flex;
    // 左右贴边对其
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #fff;
    font-size: 20px;
    // 嵌套
    .header_left {
      display: flex;
      align-items: center;
      width: 230px;
      justify-content: space-between;
      margin: 0 20px;
      img {
        height: 60px;
        width: 60px;
        border-radius: 50%;
      }
    }
    .header_center {
      width: 600px;
      overflow: hidden;
      .scroll_container {
        cursor: pointer;
        .scroll_text {
          display: inline-block;
          font-size: 1em;
          white-space: nowrap;
          // animation: scroll 20s linear infinite normal;
          animation-name: scroll;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
        }
      }

      @keyframes scroll {
        0% {
          transform: translateX(200px);
          -webkit-transform: translateX(200px);
        }
        100% {
          transform: translateX(-100%);
          -webkit-transform: translateX(-100%);
        }
      }
    }
    .header_right {
      .curTime {
        margin-right: 20px;
      }
    }
  }
  .el-aside {
    background-color: #333744;
    .el-button {
      width: 100%;
    }
  }

  .el-main {
    padding: 10px 10px;
    background-color: #e9eef3;
  }
  .toggle-button {
    background-color: #4a5064;
    font-size: 10px;
    line-height: 21px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    // 鼠标放上去显示手
    cursor: pointer;
  }
  .el-collapse {
    padding: 0 20px;
  }
}
</style>
